<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader 
    @addBtn="addFn"
    :list="showList"
    ></TodoHeader>
    <TodoMain :list="showList"
    @del="delFn"
    ></TodoMain>
    <TodoFooter
    :list="showList"
    @del="delFns"
    @changSel="changSel"
    :sel="getSel"
    ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  computed: {
    showList() {
      if(this.getSel === 'yes') {
        return this.list.filter(item=>item.isDone)
      } else if(this.getSel === 'no') {
        return this.list.filter(item=>!item.isDone)
      } else {
        return this.list
      }
    }
  },
  methods:{
    delFns(){
      this.list = this.list.filter(item=> !item.isDone)
    },
    addFn(task) {
      this.list.push(
        {id:this.list.length!==0?this.list[this.list.length - 1].id+1:100,name:task,isDone:false}
      )
    },
    delFn(index) {
      this.list.splice(index, 1)
    },
    // isAllFn(val) {
    //   this.list.forEach(item=>item.isDone = val)
    //   // console.log(val);
    // },
    changSel(val) {
      this.getSel = val
    }
  },
  data() {
    return {
      getSel:'all',
      list: JSON.parse( localStorage.getItem('todolist'))||[]
    };
  },
  watch:{
    list:{
      handler() {
        localStorage.setItem('todolist', JSON.stringify(this.list))
      },
      deep:true
    }
  }
};
</script>